<template>
  <view class="floorItem" v-if="item">
    <u-image :src="item.floor_title.image_src" mode="widthFix"></u-image>
    <view class="productList">
      <view class="left">
        <u-image
          :width="item.product_list[0].image_width"
          class="prodImg"
          :src="item.product_list[0].image_src"
          mode="widthFix"
        ></u-image>
      </view>
      <view class="right">
        <u-image
          :width="233"
          :height="188"
          class="prodImg"
          :src="item.product_list[1].image_src"
          mode="scaleToFill"
        ></u-image>
        <u-image
          :width="233"
          :height="188"
          class="prodImg"
          :src="item.product_list[2].image_src"
          mode="scaleToFill"
        ></u-image>
        <u-image
          :width="233"
          :height="188"
          class="prodImg"
          :src="item.product_list[3].image_src"
          mode="scaleToFill"
        ></u-image>
        <u-image
          :width="233"
          :height="188"
          class="prodImg"
          :src="item.product_list[4].image_src"
          mode="scaleToFill"
        ></u-image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        required: true,
      },
    },
  };
</script>

<style lang="scss" scoped>
  .floorItem {
    margin-bottom: 30rpx;
  }
  .productList {
    display: flex;
    padding: 12rpx;
    .left {
      margin-right: 15rpx;
    }
    .right {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
</style>